<template>
  <div class="page-content">
    <div class="page-header">
      <h1 class="page-title">用户设置</h1>
      <p class="page-description">管理个人信息和系统偏好</p>
    </div>

    <div class="grid gap-6">
      <!-- 个人信息 -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">个人信息</h3>
          <p class="card-description">更新您的个人资料</p>
        </div>
        <div class="card-content">
          <div class="grid grid-cols-2 gap-4">
            <div class="form-group">
              <label>用户名</label>
              <input type="text" :value="authStore.user?.username" readonly class="form-input" />
            </div>
            <div class="form-group">
              <label>邮箱</label>
              <input type="email" :value="authStore.user?.email" class="form-input" />
            </div>
          </div>
          <div class="mt-4">
            <button class="btn btn-primary">保存更改</button>
          </div>
        </div>
      </div>

      <!-- API密钥 -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">API密钥</h3>
          <p class="card-description">管理您的API访问密钥</p>
        </div>
        <div class="card-content">
          <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
            <div>
              <div class="font-medium">主API密钥</div>
              <div class="text-sm text-gray-500">用于访问kCloud API</div>
            </div>
            <div class="flex gap-2">
              <button class="btn btn-sm btn-secondary">查看</button>
              <button class="btn btn-sm btn-secondary">重新生成</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 通知设置 -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">通知设置</h3>
          <p class="card-description">配置通知偏好</p>
        </div>
        <div class="card-content">
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <div>
                <div class="font-medium">邮件通知</div>
                <div class="text-sm text-gray-500">接收重要事件的邮件通知</div>
              </div>
              <input type="checkbox" checked class="toggle" />
            </div>
            <div class="flex items-center justify-between">
              <div>
                <div class="font-medium">部署通知</div>
                <div class="text-sm text-gray-500">应用部署状态变更通知</div>
              </div>
              <input type="checkbox" checked class="toggle" />
            </div>
            <div class="flex items-center justify-between">
              <div>
                <div class="font-medium">告警通知</div>
                <div class="text-sm text-gray-500">系统告警和异常通知</div>
              </div>
              <input type="checkbox" checked class="toggle" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '../stores/auth'

const authStore = useAuthStore()
</script>

<style scoped>
.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-color);
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

.form-input[readonly] {
  background-color: #f9fafb;
  color: #6b7280;
}

.toggle {
  width: 3rem;
  height: 1.5rem;
  appearance: none;
  background-color: #d1d5db;
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.toggle:checked {
  background-color: var(--primary-color);
}

.toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.toggle:checked::before {
  transform: translateX(1.5rem);
}

.mt-4 {
  margin-top: 1rem;
}
</style>
